<template>
    <div class="container">
        <div class="wrap">
            <div class="wrap_title"></div>
            <div class="machine">
                <div class="machine_svga"></div>
                <div class="machine_chance">剩余次数：999</div>
                <div class="machine_open_btn" @click="openResult()">
                    <div class="machine_price">300元宝</div>
                </div>
                <div class="machine_bao">
                    <div class="machine_bao_label">我的元宝：</div>
                    <div class="machine_bao_value">85600</div>
                </div>
            </div>
            <div class="decorate"></div>
            <!-- 结果弹窗 -->
            <transition name="fade">
                <div class="dialog" v-if="resultShow">
                    <div class="result">
                        <div class="dialog_close_btn" @click="resultShow = false"></div>
                        <div class="result_gift">
                            <img class="result_gift_img" :src="resultGift.img" />
                            <div class="result_gift_name">{{ resultGift.name }}</div>
                        </div>
                        <div class="result_open_btn" @click="openResult()"></div>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>
<script lang="ts">
import Svga from "svgaplayerweb";
import machine from "./svga/machine.svga";
import giftImg1 from "./images/gift_img1.png";
import giftImg2 from "./images/gift_img2.png";
import giftImg3 from "./images/gift_img3.png";
import giftImg4 from "./images/gift_img4.png";
import giftImg5 from "./images/gift_img5.png";
let vm;
export default {
    data() {
        return {
            resultShow: false,
            resultGift: null,
            giftList: [
                { name: "漫天玫瑰", img: giftImg1 },
                { name: "纸鹤梦呓", img: giftImg2 },
                { name: "祈愿符", img: giftImg3 },
                { name: "恋爱日记", img: giftImg4 },
                { name: "邮寄爱情", img: giftImg5 },
            ],
            player: null,
            isWorking: false,
        };
    },
    methods: {
        // 开启扭蛋结果
        async openResult() {
            if (vm.isWorking) return;
            vm.isWorking = true;
            // 模拟接口结果
            vm.resultShow = false;
            vm.resultGift = vm.giftList[Math.floor(Math.random() * 5)];
            // 播放动画
            let isGet80 = false;
            vm.player.startAnimation();
            vm.player.onPercentage(function (number) {
                // 播放80%时，展示礼物
                if (number >= 0.8 && !isGet80) {
                    isGet80 = true;
                    vm.resultShow = true;
                    vm.isWorking = false;
                }
            });
        },
        setPlayer() {
            vm.player = new Svga.Player(".machine_svga");
            vm.player.loops = 1;
            vm.player.clearsAfterStop = false;
            // vm.player.fillMode = "Backward";
            vm.player.setContentMode("AspectFill");
            new Svga.Parser().load(machine, function (videoItem) {
                vm.player.setVideoItem(videoItem);
            });
        },
    },
    mounted() {
        vm.setPlayer();
    },
    created() {
        vm = this;
    },
};
</script>
<style lang="scss" scoped src="./egg.scss"></style>
